<template>
   <div>
	   <!--面包屑区域-->
	   <el-breadcrumb separator-class="el-icon-arrow-right">
	     <el-breadcrumb-item :to="{ path: '/adminHome/center' }">首页</el-breadcrumb-item>
	     <el-breadcrumb-item>代销管理</el-breadcrumb-item>
	     <el-breadcrumb-item>我的代销</el-breadcrumb-item>
	   </el-breadcrumb>
	   <!--卡片视图-->
	   <el-card >
		   <el-row :gutter="20">
		    <el-col :span="7" >
		    	<el-input placeholder="请输入代销ID"  v-model="searchQuery">
		    	<el-button slot="append" icon="el-icon-search" @click="handleSearch()" >搜索</el-button>
		    	</el-input>
		    </el-col>
			<el-col :span="4">
				<el-button type="primary" @click="dialogVisible = true">添加代销信息</el-button>
			</el-col>
			<el-col :span="4">
				<el-button type="primary" @click="sellList">代销列表</el-button>
			</el-col>
			</el-row>
	   </el-card>
	   <!--表格-->
	     <el-table
	       :data="tableData"
	       style="width: 100%"
	       max-height="250">
	       <el-table-column
	         fixed
	         prop="consignmentID"
	         label="代销编号"
	         width="300">
	       </el-table-column>
	       <el-table-column
	         prop="consignmentStatus"
	         label="代销状态"
	         width="200">
	       </el-table-column>
	       <el-table-column
	         prop="profitMargin"
	         label="销售利润率"
	         width="300">
	       </el-table-column>
	       <el-table-column
	         prop="productID"
	         label="商品编号"
	         width="300">
	       </el-table-column>
	       <el-table-column
	         fixed="right"
	         label="操作"
	         width="100">
	         <template slot-scope="scope">
	           <el-button
	             @click="deleteRow(scope.row.consignmentID)"
	             type="text"
	             size="small">
	             移除
	           </el-button>
	         </template>
	       </el-table-column>
	     </el-table>
	   <!--文本框-->
	   <el-dialog
	     title="添加订单信息"
	     :visible.sync="dialogVisible"
	     width="40%"
	     :before-close="handleClose">
		 <el-form :label-position="labelPosition" label-width="80px" :model="ruleForm" :rules="rules" ref="ruleForm">
		   <!-- <el-form-item label="代销编号" prop="consignmentID">
		     <el-input v-model="ruleForm.name"></el-input>
		   </el-form-item> -->
		   <el-form-item label="代销状态" prop="consignmentStatus">
		    <el-input v-model="ruleForm.consignmentStatus"></el-input>
		   </el-form-item>
		   <el-form-item label="销售利润" prop="profitMargin">
		     <el-input v-model="ruleForm.profitMargin"></el-input>
		   </el-form-item>
		   <el-form-item label="商品编号" prop="productID">
		     <el-input v-model="ruleForm.productID"></el-input>
		   </el-form-item>
		 </el-form>
	     <span></span>
	     <span slot="footer" class="dialog-footer">
	       <el-button @click="dialogVisible = false">取 消</el-button>
	       <el-button type="primary" @click="handleSubmit()">确 定</el-button>
	     </span>
	   </el-dialog>
	   
   </div>
   
</template>
<script>
	export default{
		name: 'HomeView',
		components: {
		
		},
		data(){
			return {
				
				searchQuery:'',
				
				ruleForm: {
					consignmentID:'',
					consignmentStatus: '',
					profitMargin: '',
					productID: ''
				},
				
			        goods: 5,
					dialogVisible:false,
					labelPosition: 'right',
			        form:{
						name: '',  
						category: '', // 假设这是新的类别属性  
						sale: '',  
						number:'',
			        },
					rules:{  
						 name: [  
						        { required: true, message: '请输入代销编号', trigger: 'blur' },  
						        { min: 3, max: 20, message: '代销编号长度在 3 到 20 个字符', trigger: 'blur' }  
						      ],  
						      category: [  
						        { required: true, message: '请选择代销状态', trigger: 'change' }  
						        // 注意：这里可能需要调整，因为 category 是单选按钮  
						      ],  
						      sale: [  
						        { required: true, message: '请输入利润率', trigger: 'blur' },  
						        // 假设利润率是数字或百分比，这里可能需要正则表达式验证  
						         { pattern: /^(?:0(?:\.\d{1,2})?|[1-9]\d?(?:\.\d{1,2})?)$/, // 匹配0到99.99之间的小数，但不包括百分号  
									message: '请输入有效的利润率（0-99.99',  
									trigger: 'blur'}  
						        // 由于你已有长度验证，这里注释掉  
						      ],  
						      number: [  
						        { required: true, message: '请输入商品编号', trigger: 'blur' },  
						        { min: 1, max: 20, message: '商品编号长度在 1 到 20 个字符', trigger: 'blur' }  
						      ] 
					},  
					tableData:[]
			      };
		},
		methods: {
			
			handleSearch() {
				
				let params = {
				    consignmentID: this.searchQuery 
				};  
				
					this.axios.get("ConsignmentProductsSearchById",{params:params})
					.then(
						response=>{
							this.tableData=response.data.data;
							console.log(this.tableData)
							if (response.data.code === 200) {
								this.$message({
								  message: response.data.message,  
								  type: 'success'  
								});  
								
							}else{
								this.$message({
								  message: response.data.message,  
								  type: 'warning' 
								  });  
							}
						}
					)
					.catch(error => {
					        console.error(error);  
					        this.$message({  
					        message: error.response.data.message,  
					        type: 'error'  
					        });  
					    });  
			},
			
			sellList(){
				this.axios.post('/ConsignmentProductsList', {})
				.then(response => {
									this.tableData=response.data.data;
				 })
				.catch(error => {
				   console.error(error);
				 });
			},
			
		    deleteRow(id) {
		      this.axios.get("ConsignmentProductsRemove",{
		          params: {
		            consignmentID: id
		          }
		        })
		      .then(
		      	response=>{
		      		this.sellList();
		      		console.log(response.data);
		      			this.$message.success('删除成功'); 
		      	}
		      )
		      .catch(error => {
		         console.error(error);
		       });
		    				},
			handleSubmit() {  
			this.axios.post('/ConsignmentProductsAdd', this.ruleForm)
						
			.then(response => {
			   console.log(response.data);
						 // this.getProductsInfo();
						  this.$message.success('添加成功'); 
			 })
						
						
			.catch(error => {
			   console.error(error);
			 });
			}, 
			resetForm() {  
			      this.$refs.orderForm.resetFields();   
			}
		},
			
	}
</script>

<style lang ="less" scoped>


</style>